<template>
  <div class="filterBlock">
    <div class="filter_top">
      <el-form :model="model" inline :label-width="labelWidth" @submit.native.prevent>
        <slot />
        <myFormItem>
          <btn v-if="!hasReset" label="筛选" type="primary" @click="search" />
          <btn v-if="hasReset" label="查询" type="primary" @click="search" />
          <btn v-if="hasReset" label="重置" @click="reset" />
        </myFormItem>
      </el-form>
      <div v-if="hiddenMoreFilter" class="openScreen" @click="openScreen">
        <span v-if="open"><i class="el-icon-arrow-up el-icon--right" />收起筛选</span>
        <span v-if="!open"><i class="el-icon-arrow-down el-icon--right" />打开筛选</span>
      </div>
    </div>
    <div v-show="hiddenMoreFilter" class="filter_more" :style="{height:`${moreFilerHeight}px`}">
      <el-form ref="more_filter" :model="model" inline :label-width="labelWidth" @submit.native.prevent>
        <slot name="more_filter" />
        <myFormItem>
          <btn label="筛选" type="primary" @click="search" />
          <btn label="重置" @click="reset" />
        </myFormItem>
      </el-form>
    </div>
  </div>
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill'

import { myFormItem } from '@/components/Global/Form'
export default {
  name: 'FilterBlock',
  components: { myFormItem },
  props: {
    model: {
      type: Object,
      default: () => { return {} }
    },
    moreProp: {
      type: Array,
      default: () => { return [] }
    },
    hasReset: Boolean,

    labelWidth: {
      type: [String, Number],
      default: '100px'
    }
  },
  data() {
    return {
      open: false,
      moreFilerHeight: 0,
      defaultHeight: 0
    }
  },
  computed: {
    hiddenMoreFilter() {
      return !!this.$slots.more_filter
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.defaultHeight = this.$refs.more_filter.$el.offsetHeight
      const myObserver = new ResizeObserver(entries => {
        this.defaultHeight = entries[0].contentRect.height
        this.moreFilerHeight = this.open ? this.defaultHeight : 0
      })
      myObserver.observe(this.$refs.more_filter.$el)
    })
  },
  methods: {
    openScreen() {
      this.open = !this.open
      this.moreFilerHeight = this.open ? this.defaultHeight : 0
    },
    search() {
      this.$emit('search')
    },
    reset() {
      this.moreProp.forEach(prop => {
        if (this.model[prop]) {
          this.model[prop] = null
        }
      })
      this.$emit('search')
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-form.el-form--inline{
  padding: 14px 0 0;
}
.filter_more /deep/.el-form.el-form--inline{
  padding: 4px 0 0;
}
/deep/.el-form-item{
  margin-bottom:14px;
}
.filter_top{
  display: flex;
  justify-content: space-between;
  .openScreen{
    flex: 0 0 auto;
    width: 120px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    color:#606266;
    transition: display 1s;
    cursor: pointer;
    margin: 14px 0 0 0;
    user-select: none;
    span{
    i{
      padding: 0 6px;
    }
    }
  }
}
.filter_more{
  transition: all .5s;
}
</style>
